<template>
  <div class="chartNum">
    <div class="box-item">
      <div :class="{'number-item':true,'number-item1':item === '.' || item === ','}"
           :style="(item === '.' || item === ',') ? symbolStyle : numberStyle"
           v-for="(item, index) in config.data"
           :key="index">
        <ul :ref="setRef" :style="ulStyle">
          <li :style="liStyle">0</li>
          <li :style="liStyle">1</li>
          <li :style="liStyle">2</li>
          <li :style="liStyle">3</li>
          <li :style="liStyle">4</li>
          <li :style="liStyle">5</li>
          <li :style="liStyle">6</li>
          <li :style="liStyle">7</li>
          <li :style="liStyle">8</li>
          <li :style="liStyle">9</li>
          <li :style="liStyle">0</li>
          <li :style="liStyle">1</li>
          <li :style="liStyle">2</li>
          <li :style="liStyle">3</li>
          <li :style="liStyle">4</li>
          <li :style="liStyle">5</li>
          <li :style="liStyle">6</li>
          <li :style="liStyle">7</li>
          <li :style="liStyle">8</li>
          <li :style="liStyle">9</li>
          <li :style="liStyle">.</li>
          <li :style="liStyle">,</li>
        </ul>
      </div>
      <div class="number-company" v-show="config.iscompany">
        <span :style="companyStyle">{{ config.ccontent }}</span>
      </div>

    </div>
  </div>
</template>

<script>
import {computed, onMounted, nextTick} from 'vue'

export default {
  name: 'Count',
  props: {
    config: {
      type: Object
    },
    editor: {
      type: Object
    },
    id: {
      type: String
    }
  },
  setup(props) {
    const numberItems = []
    const setRef = el => {
      numberItems.push(el)
    }
    // 设置文字滚动
    const setNumberTransform = () => {
      if (numberItems) {
        numberItems.forEach((ele, index) => {
          console.log(props.config.data[index]);
          ele.style.transition = 'none'
          ele.style.transform = 'translate(0, 0)'
          if (props.config.data[index] === '.') {
            ele.style.transform = `translate(0, -${20 * parseInt(props.editor.height)}px)`
          } else if (props.config.data[index] === ',') {
            ele.style.transform = `translate(0, -${21 * parseInt(props.editor.height)}px)`
          }
        })
        numberItems.forEach((ele, index) => {
          let num
          if (props.config.data[index] !== '.' && props.config.data[index] !== ',') {
            num = parseInt(props.config.data[index])
            setTimeout(() => {
              ele.style.transition = 'transform 1s ease-in-out'
              ele.style.transform = `translate(0, -${(10 + num) * parseInt(props.editor.height)}px)`
            }, index * 150)
          }
        })
      }
    }
    nextTick(() => {
      setNumberTransform()
    })
    // 计算li的样式
    const liStyle = computed(() => {
      return {
        height: `${props.editor.height}px`,
        'line-height': `${props.editor.height}px`
      }
    })
    // 计算数字的宽度
    const numberStyle = computed(() => {
      let style = {
        width: `${props.config.pWidth}px`,
        height: '100%',
        margin: `0 ${props.config.pMargin}px`,
        'font-size': `${props.config.fontSize}px`,
        'color': props.config.fontColor,
        background: `${props.config.pbgColor} url("${props.config.pbgImg}") no-repeat center`
      }
      if (props.config.dStyle && props.config.dStyle.trim()) {
        let styleArr = props.config.dStyle.split(';')
        styleArr.forEach(element => {
          var map = element.split(':')
          style[map[0]] = map[1]
        })
      }
      return style
    })
    // 计算单位的样式
    const companyStyle = computed(() => {
      return {
        'vertical-align': props.config.companypos,
        'font-size': `${props.config.cfontSize}px`,
        'color': props.config.cfontColor
      }
    })
    // 计算标点符号的样式
    const symbolStyle = computed(() => {
      let style = {
        background: `${props.config.symbolbgColor} url("${props.config.symbolbgImg}") no-repeat center`,
        width: `${props.config.symbolWidth}px`,
        height: '100%',
        margin: `0 ${props.config.pMargin}px`,
        'font-size': `${props.config.fontSize}px`,
        'color': props.config.fontColor
      }
      if (props.config.dStyle && props.config.dStyle.trim()) {
        let styleArr = props.config.dStyle.split(';')
        styleArr.forEach(element => {
          var map = element.split(':')
          style[map[0]] = map[1]
        })
      }
      return style
    })
    // 计算ul的样式
    const ulStyle = computed(() => {
      return {
        height: `${props.editor.height * 20}px`
      }
    })
    // 额外的扩展重新初始化的操作
    const resetComp = () => {
       setNumberTransform()
    }
    return {
      setRef,
      liStyle,
      ulStyle,
      numberStyle,
      companyStyle,
      symbolStyle,
      resetComp
    }
  }
}
</script>

<style scoped>
.chartNum {
  height: 100%;
}

.box-item {
  width: 100%;
  height: 100%;
  font-size: 54px;
  line-height: 41px;
  text-align: center;
  list-style: none;
  overflow: hidden;
}

.number-item {
  width: 41px;
  height: 100%;
  background-size: 100% 100% !important;
  float: left;
}

.number-item1 {
  width: 21px;
}

.number-company {
  width: 41px;
  height: 100%;
  float: left;
}

.number-company::after {
  display: inline-block;
  content: '1';
  overflow: hidden;
  height: 100%;
  width: 0;
}

.number-company > span {
  line-height: 1;
}

.number-item > ul {
  width: 100%;
  transition: transform 1s ease-in-out;
  height: 1500px;
}

.number-item > ul > li {
  width: 100%;
  height: 75px;
  text-align: center;
}

.number-item:last-child {
  margin-right: 0;
}
</style>
